<template>
    <div class="level">
        <div class="hos">医院</div>
        <div class="content">
            <div class="left">等级:</div>
            <ul>
                <li :class="{active:activeFlag==''}" @click="changeLevel('')">全部</li>
                <li @click="changeLevel(level.value)" :class="{active:activeFlag==level.value}" v-for="level in levelArr" :key="level.value">{{ level.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
// 引入API接口
import { reqHospitalLevelAndRegin } from '@/api/home/index'
// 引入ts类型
import { HospitalLevelAndReginArr, HospitalLevelAndReginResponseData } from '@/api/home/type'
import { ElMessage } from 'element-plus';
// 存储医院的等级
let levelArr = ref<HospitalLevelAndReginArr>([])
// 控制等级高亮效果的响应式数据
let activeFlag = ref<string>('')

// 组件挂载完毕
onMounted(()=>{
    getLevel();
})
// 封装一个方法:获取医院的等级与地区
const getLevel = async ()=>{
    // 调用API获取数据
   const result: HospitalLevelAndReginResponseData = await reqHospitalLevelAndRegin("HosType");
    // 存储医院的等级与地区
   if(result.code == 200){
    // 存储医院的等级与地区
    levelArr.value = result.data
   }else{
    //请求失败提示错误
    ElMessage({
        type:'error',
        message:'请求医院等级相关数据失败'
    }
    )
   }
}
// 接收父组件自定义事件
let $emit = defineEmits(['getLevel'])
// 等级切换的回调
const changeLevel = (level:string)=>{
    activeFlag.value = level
    // 向父组件传递level
    $emit('getLevel',level)
}
</script>
<script lang="ts">
export default{
    name:'Level',
}
</script>

<style scoped lang="scss">
.level {
    font-size: 14px;
    color: #7f7f7f;
    margin-bottom: 10px;

    .hos {
        margin-bottom: 20px;
    }

    .content {
        display: flex;

        .left {
            width: 35px;
        }

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin: 0px 0px 15px 20px;

                &.active {
                    color: #6eb3ff;
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>